<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('项目跟踪') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('创建人名称')" prop="personChargeName">
        <el-input
          v-model="queryParams.personChargeName"
          :placeholder="$t('创建人名称')"
        />
      </el-form-item>
      <el-form-item :label="$t('发生时间')" prop="happenTime">
        <DatePicker v-model="happenTimes" type="daterange" />
      </el-form-item>
      <el-form-item :label="$t('事项类型')" prop="itemType">
        <el-select v-model="queryParams.itemType" :placeholder="$t('事项类型')" clearable>
          <el-option
            v-for="dict in itemTypeOptions"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('跟踪方式')" prop="trackMode">
        <el-select v-model="queryParams.trackMode" :placeholder="$t('跟踪方式')" clearable>
          <el-option
            v-for="dict in trackModeOptions"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['deal:track:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle"
        >{{ $t("新增") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['deal:track:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-col>
    </el-row>

    <div class="dealTrack">
      <ul>
        <li v-for="info in dealTrackList" :key="info.id">
          <p class="time">{{ parseTime(info.happenTime) }}</p>
          <div class="content">
            <div class="main" @click="updateHandle(info)">
              <div class="top">
                <span class="nickName">{{ info.user.nickName }}</span>
                <span class="track">{{ trackModeFormat(info) }}</span>
                <span class="type">{{ itemTypeFormat(info) }}</span>
              </div>
              <div class="otherPeople"><span>对方人员</span>: <p>{{ info.otherPeople ? info.otherPeople : '-' }}</p></div>
              <div v-for="field in info.fields" :key="field.id" class="otherPeople"><span>{{ field.fieldLabel }}</span>:
                <div style="white-space: pre-wrap;word-break: break-all" v-html="field.content" />
              </div>
              <div class="otherPeople"><span>详细情况</span>:
                <template v-if="info.details">
                  <div class="richTextField" v-html="info.details" />
                </template>
                <span v-else>-</span>
              </div>
              <div class="otherPeople"><span>下步计划</span>:
                <template v-if="info.nextStepPlan">
                  <div class="richTextField" v-html="info.nextStepPlan" />
                </template>
                <span v-else>-</span>
              </div>
              <div class="otherFile"><span>附件:</span>
                <template v-if="info.fileList.length>0">
                  <div class="file">
                    <p v-for="file in info.fileList" :key="file.id" class="click_file">
                      <span style="color:#409EFF" @click.stop="preview(file.id)">{{ file.name }}</span>
                      <span style="color:#409EFF;margin-left: 10px;" @click.stop="download(file.id)">
                        <i class="el-icon-download" style="color:#409EFF;font-size: 14px" />
                        <span style="color:#409EFF;margin-left: -5px;">{{ $t('下载') }}</span>
                      </span>
                    </p>
                  </div>
                </template>
                <template v-else>-</template>
              </div>
            </div>
            <div class="btn">
              <el-button
                v-hasPermi="['deal:track:edit']"
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="updateHandle(info)"
              />
              <el-button
                v-hasPermi="['deal:track:remove']"
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="deleteHandle(info)"
              />
            </div>
          </div>
        </li>
      </ul>
    </div>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改项目跟踪对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" :destroy-on-close="true" custom-class="dialogForm" append-to-body>
      <dealTrackForm v-if="formOpen" ref="dealTrackForm" :deal-id="queryParams.dealId" :is-deal="false" />
    </el-dialog>
    <OnlinePreview ref="OnlinePreview" :preview-tit="previewTit" />
  </div>
</template>

<script>
import { listDealTrack, delDealTrack } from '@/api/deal/track/dealTrack'
import dealTrackForm from './dealTrackForm.vue'
import { downLoadFileOpen } from '@/utils/zipdownload'

export default {
    components: {
        dealTrackForm
    },
     props: {
      dealIdProp: {
        type: String,
        default: () => '',
        required: false
      }
    },
  data() {
      return {
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 是否显示 在分析报表-项目跟踪页面 点击查看全部时会展示该页面 只展示table其它全部不显示
          isShow: true,
          // 发生时间 参数
          happenTimes: undefined,
          // 项目跟踪表格数据
          dealTrackList: [],
          // 弹出层标题
          title: '项目跟踪',
          // 是否显示弹出层
          formOpen: false,
        // 事项类型 字典item_type字典
        itemTypeOptions: [],
        // 跟踪方式 字典track_mode字典
        trackModeOptions: [],
          // 查询参数
          queryParams: {
              personChargeName: undefined,
              dealId: this.$route.query.id ? this.$route.query.id : this.dealIdProp,
              startDate: undefined,
              endDate: undefined,
              itemType: undefined,
              trackMode: undefined,
              otherPeople: undefined,
              details: undefined,
              pageNum: 1,
              pageSize: 10
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {
          },
          previewTit: ''
      }
  },
  created() {
      this.getList()
      this.getDicts('item_type').then(response => {
          this.itemTypeOptions = response.data
      })
      this.getDicts('track_mode').then(response => {
          this.trackModeOptions = response.data
      })
  },
  methods: {
    formatText(text) {
      if (text) {
        var val = text.replace(/\n/g, '</li><li>')
        return '<ul class="ul_style"><li>' + val + '</li></ul>'
      } else {
        return text
      }
    },
    /** 查询项目跟踪列表 */
    getList() {
      console.log('this.queryParams', this.queryParams)
        this.loading = true
        if (this.happenTimes != null && this.happenTimes.length > 1) {
          this.queryParams.startDate = this.happenTimes[0]
          this.queryParams.endDate = this.happenTimes[1]
        } else {
          this.queryParams.startDate = undefined
          this.queryParams.endDate = undefined
        }
        listDealTrack(this.queryParams).then(response => {
            this.dealTrackList = response.rows
            this.total = response.total
            this.loading = false
        })
    },
    download(fileId) {
      downLoadFileOpen(fileId)
    },
    // 事项类型 字典item_type字典翻译
    itemTypeFormat(row) {
      return this.selectDictLabel(this.itemTypeOptions, row.itemType)
    },
    // 跟踪方式 字典track_mode字典翻译
    trackModeFormat(row) {
      return this.selectDictLabel(this.trackModeOptions, row.trackMode)
    },

    // 表单重置
    reset() {
        this.form = {
            id: undefined,
            user: {
              userId: undefined,
              userName: undefined,
              nickName: undefined
            },
            happenTime: undefined,
            itemType: undefined,
            trackMode: undefined,
            otherPeople: undefined,
            details: undefined,
            createBy: undefined,
            createTime: undefined,
            updateBy: undefined,
            updateTime: undefined,
            delFlag: undefined
        }
        this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.happenTimes = undefined
        this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
        this.formOpen = true
        this.$nextTick(() => {
            this.$refs.dealTrackForm.init(null)
        })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.dealTrackForm.init(row)
        })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return delDealTrack(row.id)
        }).then(() => {
            this.getList()
            this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
    },
    /** 导出按钮操作 */
    exportHandle() {
        this.downLoadExcelPost('/track/dealTrack/export', this.queryParams)
    },
    preview(fileId) {
       this.$refs.OnlinePreview.onlinePreviewFile(fileId, 'view')
    }
  }
}
</script>

<style lang="scss" scoped>
.otherFile{
  color: rgba(0, 0, 0, 0.8);
  font-size: 13px;
  display: flex;
  span{
    color: rgba(0, 0, 0, 0.65);
    white-space: nowrap;
  }
  .file{
    margin-left: 10px;
    p{
      margin:0px;
      line-height: 20px;
      margin-bottom: 5px;
      &:last-child{
        margin: 0;
      }
    }
  }

}
 .click_file{
  color:#409EFF;
  cursor: pointer;
  display: block !important;
}
.dealTrack{
  // box-shadow: 0 2px 12px 0 #eee;
  border-radius: 10px;
  margin: 10px 0;
  padding: 25px 25px 25px 150px;
  p{
    margin: 0;
  }
  ul{
    li{
      position: relative;
      border-left: 1px solid #E1E2E8;
      padding-left: 30px;
      padding-bottom: 20px;
      .time{
        position: absolute;
        left: -100px;
        font-size: 14px;
        top: calc(50% - 12px);
      }
      .top{
        display: flex;
        align-items: center;
        column-gap: 10px;
        margin-bottom: 10px;
        .nickName{
          font-weight: bold;
          font-size: 14px;
        }
        .track{
          background: #9288D0;
          color: #fff;
          font-size: 13px;
          border-radius: 10px;
          padding: 3px 6px;
        }
        .type{
          background: #59D6CD;
          color: #fff;
          font-size: 13px;
          border-radius: 10px;
          padding: 3px 6px;
        }
      }
      .otherPeople{
        color: rgba(0, 0, 0, 0.8);
        font-size: 13px;
        display: flex;
        flex-wrap: wrap;
        span{
          color: rgba(0, 0, 0, 0.65);
          white-space: nowrap;
        }
        p{
          margin-left: 5px;
          line-height: 16px;
          overflow-wrap: anywhere;
        }
        div{
          width: 100%;
        }
      }
      .details{
        color: #F4A9A2;
      }
      .main{
        background-color: #F4F7F6;
        border-radius: 10px;
        padding: 15px;
        width: 70%;
        flex: 1;
        position: relative;
        &::before{
          position: absolute;
          content: '';
          width:0;
          height:0;
          border-top:10px solid transparent;
          border-bottom:10px solid transparent;
          border-right:10px solid #F4F7F6;
          left: -10px;
          top: calc(50% - 5px);
        }
        div{
          margin-bottom: 10px;
          line-height: 16px;
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
      .content{
        display: flex;
        align-items: center;
        .btn{
          width: 70px;
          text-align: center;
        }
      }
      &::before{
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #E1E2E8;
        left: -6px;
        top: calc(50% - 10px);
      }
    }
  }
}

/deep/.el-dialog__body {
    height: calc(100% - 55px);
    padding: 0 !important;
    width: 100%;
}
::v-deep .onlyShowEditor{
  //.tox-editor-header, .tox-statusbar{
  //  display: none;
  //}
  //div.mce-edit-area, .mce-panel{
  //  border: 0!important;
  //  background: transparent;
  //  box-shadow: none;
  //}
}
::v-deep iframe#vue-tinymce* {
  //background: #ffffff00 !important;
}
</style>
